<template>
	<view class="share-popup"  :catchtouchmove="catchtouchmove" :class="{'drawer-visible':visible}">
		<view class="drawer-mask " @tap="close"></view>

		<view class="drawer-content">
			
			<view class="share-icon-list">
				<view class="share-item">
					<image src="/static/img/tabBar/icon-weixin.png" mode="widthFix"></image>
					分享到微信
				</view>
				<view class="share-item">
					<image src="/static/img/tabBar/icon-pengyouquan.png" mode="widthFix"></image>
					分享到朋友圈
				</view>
				<view class="share-item">
					<image src="/static/img/tabBar/icon-qq.png" mode="widthFix"></image>
					分享到QQ
				</view>
				<view class="share-item">
					<image src="/static/img/tabBar/icon-kongjian.png" mode="widthFix"></image>
					分享到QQ空间
				</view>
			</view>
				
			<view class="btn-close" @tap="close">
				关闭
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			visible: {/*显示状态*/
				type: Boolean,
				default: false
			}
		},
		data(){
			return {
				catchtouchmove:false
			}
		},
		methods: {
			close() {
				// console.log('close');
				this.$emit('close')
			}
		},
		created() {
			//#ifdef MP-WEIXIN
			this.catchtouchmove = true
			//#endif
		},
	}
</script>

<style lang="scss">
	.share-popup {

		box-sizing: border-box;
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		visibility: hidden;
		z-index: 998;
		height: 100%;
		width: 100%;
		// border: 1px solid red;

		.drawer-mask {
			display: block;
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.1);
		}

		.drawer-content {
			position: absolute;
			background-color: #FFF;
			width: 100%;

			transition: all 0.3s ease-out;
			height: 26%;
			bottom: -26%;
		}
		
		.share-icon-list {
			display: flex;
			flex-direction: row;
			
			justify-content: space-around;
			
			margin: 30upx 0upx ;
			
			box-shadow: 0px -0px 0px rgba(94, 94, 94, 0.3);
		}
		
		.share-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 13px;
			color: #666;
			
			image {
				width: 55px;
				height: 55px;
				margin-bottom: 10px;
			}
		}
		
		.btn-close {
			position: absolute;
			width: 100%;
			text-align: center;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			border-top: 1px solid #ccc;
			// padding: 20upx;
			height: 25%;
			bottom: 0%;
		}
	}

	.drawer-visible {
		visibility:visible;
	}

	.drawer-visible {
		.drawer-content {
			bottom: 0% !important;
		}
	}
</style>
